<template>
  <div>
    <tableBar>
      <!-- path属性传递跳转的路径,绑定属性如果是直接绑定的字符串不用写: textActive属性选项被中时文字的颜色-->
      <itemTableBar path="/mainPage/home" textActive="#FF4C6E">
        <img src="~assets/img/tabbar/home.svg" slot="item-icon-unactive" />
        <img src="~assets/img/tabbar/home_active.svg" slot="item-icon-active" />
        <div slot="item-text">首页</div>
      </itemTableBar>
      <itemTableBar path="/mainPage/category" textActive="#FF4C6E">
        <img src="~assets/img/tabbar/category.svg" slot="item-icon-unactive" />
        <img src="~assets/img/tabbar/category_active.svg" slot="item-icon-active" />
        <div slot="item-text">分类</div>
      </itemTableBar>
      <itemTableBar path="/mainPage/shoppingCar" textActive="#FF4C6E">
        <img src="~assets/img/tabbar/cart.svg" slot="item-icon-unactive" />
        <img src="~assets/img/tabbar/cart_active.svg" slot="item-icon-active" />
        <div slot="item-text">购物车</div>
      </itemTableBar>
      <itemTableBar path="/mainPage/profile" textActive="#FF4C6E">
        <img src="~assets/img/tabbar/profile.svg" slot="item-icon-unactive" />
        <img src="~assets/img/tabbar/profile_active.svg" slot="item-icon-active" />
        <div slot="item-text">我的</div>
      </itemTableBar>
    </tableBar>
  </div>
</template>

<script>
//引入tableBar组件
import tableBar from "components/common/tabbar/TableBar";
//引入tableBar的子组件
import itemTableBar from "components/common/tabbar/ItemTabBar";
export default {
  data() {
    return {};
  },
  components: {
    tableBar,
    itemTableBar
  }
};
</script>

<style scoped>
</style>
